/**
 * useVxeModal - 基于 VxeUI 最新 API 的纯组合式函数实现
 *
 * 使用 VxeUI.modal.open 命令式 API 动态创建和管理一个展示URL内容的弹窗。
 * 这是目前推荐的最佳实践。
 *
 * @returns {Object} 返回包含 openUrlModal, openUrl, openUrlFullscreen 方法的对象
 */
import { h } from 'vue';
import { VxeUI } from 'vxe-pc-ui';

export function useVxeModal() {
  /**
   * 打开URL弹窗的核心方法
   * @param {Object} options - 配置选项
   * @param {string} options.url - 要打开的URL
   * @param {string} options.title - 弹窗标题
   * @param {string} options.width - 弹窗宽度，默认'70vw'
   * @param {string} options.height - 弹窗高度，默认'80vh'
   * @param {Function} options.onClose - 关闭时的回调函数
   * @returns {Promise<any>} 返回一个Promise，在弹窗关闭时 resolve
   */
  const openUrlModal = (options = {}) => {
    const {
      url = '',
      title = '页面预览',
      width = '70vw',
      height = '80vh',
      onClose = () => {},
    } = options;

    // 1. 处理和生成最终的 iframe URL
    const processUrl = (rawUrl) => {
      if (!rawUrl) return '';
      try {
        // 确保在浏览器环境
        if (typeof window === 'undefined') return '';

        // 获取协议和主机
        const origin = window.location.origin; // => "http://rds-admin.test"
        // 获取路径名 ，并移除末尾可能存在的 index.html 或其他文件名
        // location.pathname => "/dist/" 或 "/dist/index.html"
        // 我们需要确保得到的是目录路径 "/dist/"
        let basePath = window.location.pathname;
        if (basePath.endsWith('.html')) {
          basePath = basePath.substring(0, basePath.lastIndexOf('/') + 1);
        }
        // 确保 basePath 以 '/' 结尾
        if (!basePath.endsWith('/')) {
          basePath += '/';
        }
        // 组合成完整的应用根路径
        // origin => "http://rds-admin.test"
        // basePath => "/dist/"
        // host => "http://rds-admin.test/dist/"
        const host = `${origin}${basePath}`;
        const separator = rawUrl.includes('?') ? '&' : '?';
        // 最终 URL 拼接
        // host => "http://rds-admin.test/dist/"
        // rawUrl => "/admin/role"
        // 结果 => "http://rds-admin.test/dist/#/admin/role?nolayout=1"
        return `${host}#${rawUrl}${separator}nolayout=1`;
      } catch (error) {
        console.error('处理URL失败:', error);
        return '';
      }
    };

    const targetUrl = processUrl(url);
    console.log('targetUrl', targetUrl);

    // 2. 使用 VxeUI.modal.open API
    return VxeUI.modal.open({
      // VxeUI 模态框的所有 props 都可以直接在这里配置
      title,
      width,
      height,
      mask: true,
      lockView: false,
      lockScroll: true,
      destroyOnClose: true,
      showZoom: true,
      resize: true,
      remember: true,

      // 使用 slots.default 来渲染内容
      // 通过 h 函数创建 VNode 作为内容
      slots: {
        default: () => {
          return h('div', { style: { height: '100%', overflow: 'hidden' } }, [
            !targetUrl
              ? h('div', {}, '未提供有效的URL')
              : h('iframe', {
                  src: targetUrl,
                  style: {
                    width: '100%',
                    height: '100%',
                    border: 'none',
                    display: 'block',
                  },
                  frameborder: '0',
                }),
          ]);
        },
      },
      onClose: (params) => {
        onClose(params);
      },
    });
  };

  /**
   * 快速打开URL弹窗的便捷方法
   * @param {string} url - URL地址
   * @param {string} title - 弹窗标题
   * @returns {Promise<any>}
   */
  const openUrl = (url, title = '页面预览') => {
    return openUrlModal({ url, title });
  };

  /**
   * 打开全屏URL弹窗
   * @param {string} url - URL地址
   * @param {string} title - 弹窗标题
   * @returns {Promise<any>}
   */
  const openUrlFullscreen = (url, title = '页面预览') => {
    return openUrlModal({
      url,
      title,
      width: '100vw',
      height: '100vh',
    });
  };

  return {
    openUrlModal,
    openUrl,
    openUrlFullscreen,
  };
}
